<template>
  <div v-if="item['format'] !== undefined" v-html="dateFormat(scope.row[item.key], item['format'])"></div>
  <div v-else-if="item['suffix'] !== undefined && item['decimals'] !== undefined" v-html="(doToFixed(scope.row[item.key], item['decimals']) + item['suffix'],
    item['pad'])
    "></div>
  <div v-else-if="item['prefix'] !== undefined" v-html="item['prefix'] + scope.row[item.key]"></div>
  <div v-else-if="item['suffix'] !== undefined" v-html="scope.row[item.key] + item['suffix']"></div>
  <div v-else-if="item['decimals'] !== undefined"
    v-html="doToFixed(scope.row[item.key], item['decimals'], item['pad'])"></div>
  <div :style="item['style'](scope.row[item.key], scope.row, scope.$index)" v-else-if="item['style'] !== undefined"
    v-html="scope.row[item.key]"></div>
  <div v-else-if="item['html'] !== undefined" v-html="item['html'](scope.row[item.key], scope.row, scope.$index)"></div>
  <el-rate v-else-if="item['rate'] === true" v-model="scope.row[item.key]" :disabled="true"
    v-bind="item.attrs"></el-rate>
  <div v-else-if="item['tooltip'] === true">
    <el-popover :trigger="item['tooltip-trigger'] || 'hover'" :width="item['tooltip-width'] || 200"
      :append-to-body="false">
      <div style="
          display: flex;
          border-bottom: 1px solid #ebeef5;
          padding: 5px;
          margin-bottom: 5px;
        ">
        <div style="display: flex; flex: 1;color:#999;">内容</div>
        <div>
          <i style="cursor: pointer" title="复制单元格文本" class="el-icon-document-copy cell-copy"
            @click="copyText(scope.row[item.key])"></i>
        </div>
      </div>
      <div>{{ scope.row[item.key] }}</div>
      <template #reference style="display: flex">
        <div style="
            display: block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          ">
          {{ scope.row[item.key] }}
        </div>
      </template>
    </el-popover>
  </div>
  <div v-else v-html="scope.row[item.key]"></div>
</template>

<script>
import dayjs from "dayjs";
export default {
  props: ["item", "scope"],
  methods: {
    copyText(value) {
      try {
        const textValue = document.createElement("textarea"); // 创建DOM元素
        document.body.appendChild(textValue); // 将创建的DOM插入到Body上
        textValue.value = value; // 将数据赋值给创建的DOM元素的Value上
        textValue.select(); // 通过表单元素的select()方法选中内容
        document.execCommand("copy"); // 执行浏览器复制命令
        console.log("复制成功"); // 复制完成后的提示
        this.$message.success("单元格文本复制成功！");
        document.body.removeChild(textValue); // 移除DOM元素
      } catch (error) {
        console.log(error)
      }
    },
    //格式化时间
    dateFormat(tdate, f) {
      if (dayjs(tdate).isValid()) {
        return dayjs(tdate).format(f);
      } else {
        return tdate;
      }
    },
    //保留小数位数
    doToFixed(data, num, pad = true) {
      if (Number.isNaN(parseFloat(data))) {
        return "";
      } else {
        if (pad) {
          return parseFloat(data).toFixed(num);
        } else {
          return parseFloat(parseFloat(data).toFixed(num));
        }
      }
    },
  },
};
</script>

<style lang="css" scoped>
.cell-copy:hover {
  transform: scale(1.1);
  color: red;
}
</style>